<template>
    <div class="statusitemform">
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>数值</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.lineId" filterable clearable placeholder="请选择数据" size="mini"
                    @change="selectLineId">
                    <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>小数点位</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model.number="obj.decimal" type="number" class="miniinput" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>数值后缀</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model="obj.unit" type="text" style="width: 52px;" />
                <input v-model.number="obj.unitSize" style="width: 40px;margin:0 10px;" type="number" />
                <el-color-picker popper-class="mycolorview" v-model="obj.unitColor" size="small" show-alpha
                    :predefine="predefineColors" @active-change="setColorChange(obj, 'unitColor', $event)">
                </el-color-picker>
                <div class="fontstylev">
                    <div :class="['fontitem', { 'active': obj.unitFontWeight == 'bold' }]"
                        @click="setFontStyle('fontWeight', obj, 'unitFontWeight')"><i
                            class="iconfont icon-zitijiacu"></i></div>
                    <div :class="['fontitem', { 'active': obj.unitFontStyle == 'italic' }]"
                        @click="setFontStyle('fontStyle', obj, 'unitFontStyle')"><i class="iconfont icon-zitixieti"></i>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>显示数值</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.isShowValue"></el-checkbox>
                <span style="margin:0 15px 0 0;">显示状态值</span>
                <el-checkbox v-model="obj.isShowText"></el-checkbox>
            </el-col>
        </el-row>
        <div class="statitems" v-for="(item, index) in obj.statusList" :key="'status' + index">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>状态{{ index + 1 }}</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                    <input type="number" v-model="item.value" style="width: 52px;" />
                    <span style="margin-right:8px;">&nbsp;及以上</span>
                    <!-- <el-color-picker popper-class="mycolorview" v-model="item.backgroundColor" size="small" show-alpha
                        :predefine="predefineColors"
                        @active-change="setColorChange(obj.statusList[index], 'backgroundColor', $event)" /> -->
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>数值字体</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                    <input v-model.number="item.valSize" style="width: 104px;margin-right:8px;" type="number" />
                    <el-color-picker popper-class="mycolorview" v-model="item.valColor" size="small" show-alpha
                        :predefine="predefineColors"
                        @active-change="setColorChange(obj.statusList[index], 'valColor', $event)">
                    </el-color-picker>
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': item.valFontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', item, 'valFontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': item.valFontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', item, 'valFontStyle')"><i
                                class="iconfont icon-zitixieti"></i></div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>状态值</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                    <input v-model="item.text" style="width:52px;" />
                    <input v-model.number="item.textSize" style="width: 40px;margin:0 10px;" type="number" />
                    <el-color-picker popper-class="mycolorview" v-model="item.textColor" size="small" show-alpha
                        :predefine="predefineColors"
                        @active-change="setColorChange(obj.statusList[index], 'textColor', $event)">
                    </el-color-picker>
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': item.textFontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', item, 'textFontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': item.textFontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', item, 'textFontStyle')"><i
                                class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>背景</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-color-picker popper-class="mycolorview" v-model="item.backgroundColor" size="small" show-alpha
                        :predefine="predefineColors"
                        @active-change="setColorChange(obj.tableData.statusList[index], 'backgroundColor', $event)" />
                    <select v-model="item.bgType" style="width: 170px;margin-left:10px;">
                        <option :value="0">图片</option>
                        <option :value="1">图形</option>
                    </select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" v-if="item.bgType == 0">
                <el-col :span="8" class="editlabel">
                    <span>背景图片</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                        <el-upload :action="uploadUrl" :on-success="uploadHandleChange"
                            :data="{ CustomerId: $store.getters.firmId }" :show-file-list="false"
                            accept=".jpg, .png, .gif">
                            <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                            </div>
                        </el-upload>
                    </el-tooltip>
                    <select style="width: 154px" v-model="item.backgroundImage">
                        <option value>请选择背景图片</option>
                        <option v-for="item in backgroundImgArr" :value="item.url" :key="item">
                            {{ item.name }}
                        </option>
                    </select> -->
                    <img-store v-model="item.backgroundImage">
                        <el-button size="mini" slot="button">请选择背景图片</el-button>
                    </img-store>
                </el-col>
            </el-row>
            <template v-if="item.bgType == 1">
                <el-row type="flex" class="editformitem">
                    <el-col :span="8" class="editlabel">
                        <span>选择图形</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-select v-model="item.iconGroup" style="width:212px" filterable placeholder="请选择"
                            size="mini">
                            <el-option v-for="item in figureArr" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem">
                    <el-col :span="8" class="editlabel">
                        <span>图形颜色</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-color-picker v-model="item.iconColor" size="small" show-alpha :predefine="predefineColors"
                            popper-class="mycolorview" @active-change="setColorChange(item, 'iconColor', $event)" />
                        <el-checkbox v-model="item.isNull" style="padding-left:15px;">是否镂空</el-checkbox>
                    </el-col>
                </el-row>
            </template>
            <span v-if="index > 0" class="statusdel" @click="deleteDataYinfo(obj.statusList, index)">×</span>
        </div>
        <div class="addybtn" @click="addStatusStatusinfo(obj.statusList)" style="margin-right:0px;">
            + 添加状态
        </div>
        <hr class="kbline" />
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>标题</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model="obj.title" type="text" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>标题字体</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model.number="obj.style.fontSize" class="miniinput" type="number" />
                <el-color-picker v-model="obj.style.color" size="small" show-alpha :predefine="predefineColors"
                    popper-class="mycolorview" @active-change="setColorChange(obj.style, 'color', $event)" />
                <div class="fontstylev">
                    <div :class="['fontitem', { 'active': obj.style.fontWeight == 'bold' }]"
                        @click="setFontStyle('fontWeight', obj.style, 'fontWeight')"><i
                            class="iconfont icon-zitijiacu"></i>
                    </div>
                    <div :class="['fontitem', { 'active': obj.style.fontStyle == 'italic' }]"
                        @click="setFontStyle('fontStyle', obj.style, 'fontStyle')"><i
                            class="iconfont icon-zitixieti"></i></div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>排列</span>
            </el-col>
            <el-col :span="16" class="editcontent plinfo">
                <el-radio v-model="obj.showType" :label="1" style="margin-right:12px;">同行</el-radio>
                <el-radio v-model="obj.showType" :label="2" style="margin-right:12px;">标题在上</el-radio>
                <el-radio v-model="obj.showType" :label="3" style="margin-right:0px;">数字在上</el-radio>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>对齐</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <div class="flex">
                    <div :class="flexstyle('flex-start')" @click="setjustifyContent('flex-start')">
                        <i class="iconfont icon-zuoduiqi"></i>
                    </div>
                    <div :class="flexstyle('center')" @click="setjustifyContent('center')">
                        <i class="iconfont icon-shuipingjuzhongduiqi"></i>
                    </div>
                    <div :class="flexstyle('flex-end')" @click="setjustifyContent('flex-end')">
                        <i class="iconfont icon-youduiqi"></i>
                    </div>
                    <div :class="flexstyle2('flex-start')" @click="setAlignItems('flex-start')">
                        <i class="iconfont icon-jushangduiqi"></i>
                    </div>
                    <div :class="flexstyle2('center')" @click="setAlignItems('center')">
                        <i class="iconfont icon-chuizhijuzhongduiqi"></i>
                    </div>
                    <div :class="flexstyle2('flex-end')" @click="setAlignItems('flex-end')">
                        <i class="iconfont icon-juxiaduiqi"></i>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>背景</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-color-picker class="inputsize" v-model="obj.style.backgroundColor" size="small" show-alpha
                    :predefine="predefineColors" popper-class="mycolorview"
                    @active-change="setColorChange(obj.style, 'backgroundColor', $event)" />
                <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                    <el-upload action="" :http-request="uploadToCos" :show-file-list="false" accept=".jpg, .png, .gif">
                        <div class="uploadBtn">
                            <i class="el-icon-upload"></i>
                        </div>
                    </el-upload>
                </el-tooltip>
                <select style="width: 154px" v-model="obj.style.backgroundImage">
                    <option value>请选择背景图片</option>
                    <option v-for="item in backgroundImgArr" :value="item.url" :key="item.name">
                        {{ item.name }}
                    </option>
                </select> -->
                <img-store v-model="obj.style.backgroundImage" style="display:inline-block">
                    <el-button size="mini" slot="button">请选择背景图片</el-button>
                </img-store>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>边框</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model="obj.style.borderWidth" type="number" class="miniinput" />
                <el-color-picker v-model="obj.style.borderColor" size="small" show-alpha :predefine="predefineColors"
                    popper-class="mycolorview" @active-change="setColorChange(obj.style, 'borderColor', $event)" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>圆角</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model="obj.style.borderRadius" type="number" class="miniinput" /><span>px</span>
            </el-col>
        </el-row>
        <hr class="kbline" />
        <div class="glkbview">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>点击跳转</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio v-model="obj.contactType" :label="1">看板</el-radio>
                    <el-radio v-model="obj.contactType" :label="2">网址</el-radio>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle" v-if="obj.contactType == 2">
                <el-col :span="8" class="editlabel">
                    <span></span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <!-- <input v-model="obj.url" type="text" /> -->
                    <el-input type="textarea" v-model="obj.url" :autosize="{ minRows: 4 }"></el-input>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle" v-if="obj.contactType == 1">
                <el-col :span="8" class="editlabel">
                    <span></span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <select v-model="obj.boardId">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in boardListArr" :key="item.id">
                            {{ item.name }}
                        </option>
                    </select>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
// import { query } from "@/api/resource";
// import { uploadObject } from "@/utils/upload"
import ImgStore from "@/components/ImgStore"
export default {
    name: "StatusItemForm",
    props: {
        obj: Object,
        predefineColors: Array,
        columnData: Array,
        boardListArr: Array,
        figureArr: Array,
    },
    components: {
        ImgStore
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            backgroundImgArr: [],
            uploadUrl: process.env.VUE_APP_UPLOAD_API,
        }
    },
    watch: {
        obj: {
            // deep: true, // 深度监听
            handler(newVal, oldVal) {
                this.init();
            },
        },
    },
    created() {
        this.getImgList();
    },
    methods: {
        // 参数更改进行不同的初始化
        init() {
        },
        addStatusStatusinfo(item) {
            var info = item[item.length - 1];
            var data = {
                value: info.value,
                color: info.color,
                backgroundColor: info.backgroundColor,
                valSize: info.valSize,
                valColor: info.valColor,
                valFontWeight: info.valFontWeight,
                valFontStyle: info.valFontStyle,
                text: info.text,
                textSize: info.textSize,
                textColor: info.textColor,
                textFontWeight: info.textFontWeight,
                textFontStyle: info.textFontStyle,
            };
            item.push(data);
        },
        // 删除y轴数据
        deleteDataYinfo(item, index) {
            item.splice(index, 1);
        },
        getImgList() {
            query({
                pageInfo: {
                    pageSize: 999,
                    page: 1,
                    totalCount: 0,
                },
                orderBy: "createTime",
                orderAsc: false,
                name: "",
                typeInc: [0],
            }).then((response) => {
                if (response.data.code == 0) {
                    this.backgroundImgArr = response.data.data.data;
                }
            })
        },
        setjustifyContent(style) {
            this.obj.style.justifyContent = style;
            this.$emit("change", this.obj);
        },
        setAlignItems(style) {
            this.obj.style.alignItems = style;
            this.$emit("change", this.obj);
        },
        flexstyle(style) {
            if (this.obj.style.justifyContent == style) {
                return ["flexstyle", "active"];
            } else {
                return ["flexstyle"];
            }
        },
        flexstyle2(style) {
            if (this.obj.style.alignItems == style) {
                return ["flexstyle", "active"];
            } else {
                return ["flexstyle"];
            }
        },
        createData() {
            const tempDataForm = Object.assign({}, this.uploadDataform);
            create(tempDataForm)
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });

                        this.getImgList();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(() => { });
        },
        setColorChange(item, attr, val) {
            console.log(item);
            item[attr] = val;
            this.$emit("change", this.obj);
        },
        setFontStyle(style, item, attr) {
            if (style == "fontWeight") {
                if (item[attr] == "bold") {
                    item[attr] = '';
                } else {
                    item[attr] = "bold";
                }
                this.$emit("change", this.obj);
            } else if (style == "fontStyle") {
                if (item[attr] == "italic") {
                    item[attr] = '';
                } else {
                    item[attr] = "italic";
                }
                this.$emit("change", this.obj);
            }
        },
        // 列id更改 更新表数据
        selectLineId() {
            this.$emit("reloadData");
        }
    }
}
</script>

<style>
.statusitemform {
    position: absolute;
    top: 0;
    bottom: 0;
    padding-bottom: 200px;
    left: 0;
    right: 0;
    background: #f9f9f9;
    z-index: 2;
}
</style>